<template>
	<div>
		<!-- 轮播 -->
		<swiper :indicatorDots="true" :autoplay="true" :interval="2000" :duration="500">
			<swiper-item v-for="(item,i) in carouselItems" :key="i">
				<image :src="item.img" style="width: 100%;" mode="widthFix" />
			</swiper-item>
		</swiper>

		<!-- 快捷入口 -->
		<uni-grid :column="4" :showBorder="false" :square="false">
			<uni-grid-item>
				<view class="grid-item-box">
					<image src="/static/images/menu1.png" class="image" mode="aspectFill" />
					<text class="text">新闻咨询</text>
				</view>
			</uni-grid-item>
			<uni-grid-item>
				<view class="grid-item-box">
					<image src="/static/images/menu2.png" class="image" mode="aspectFill" />
					<text class="text">图片分享</text>
				</view>
			</uni-grid-item>
			<uni-grid-item>
				<view class="grid-item-box">
					<image src="/static/images/menu3.png" class="image" mode="aspectFill" />
					<text class="text">商品购买</text>
				</view>
			</uni-grid-item>
			<uni-grid-item>
				<view class="grid-item-box">
					<image src="/static/images/menu4.png" class="image" mode="aspectFill" />
					<text class="text">留言反馈</text>
				</view>
			</uni-grid-item>
			<uni-grid-item>
				<view class="grid-item-box">
					<image src="/static/images/menu5.png" class="image" mode="aspectFill" />
					<text class="text">视频专区</text>
				</view>
			</uni-grid-item>
			<uni-grid-item>
				<view class="grid-item-box">
					<image src="/static/images/menu6.png" class="image" mode="aspectFill" />
					<text class="text">联系我们</text>
				</view>
			</uni-grid-item>
		</uni-grid>


		<!-- 推荐商品 -->
		<view class="titleHeader">
			<uni-icons type="shop" size="30"></uni-icons>
			<view class="">
				商品推荐
			</view>
		</view>
		<view class="listContainer1">
			<view class="listItem" v-for="(item,i) in recommendGoodsList" :key="i" @click="onClick2Detail(item.goodsId)">
				<image class="goodsImage" :src="item.goodsImg" mode="aspectFit"></image>
				<view class="goodsName">{{item.goodsName}}</view>
				<view class="goodsPrice">${{item.goodsPrice}}</view>
			</view>
		</view>

		<!-- 新品上架 -->
		<view class="titleHeader">
			<uni-icons type="shop" size="30"></uni-icons>
			<view class="">
				新品上架
			</view>
		</view>
		<view class="listContainer1">
			<view class="listItem" v-for="(item,i) in newGoodsList" :key="i">
				<image class="goodsImage" :src="item.goodsImg" mode="aspectFit"></image>
				<view class="goodsName">{{item.goodsName}}</view>
				<view class="goodsPrice">${{item.goodsPrice}}</view>
			</view>
		</view>


		<!-- 热销商品 -->
		<view class="titleHeader">
			<uni-icons type="shop" size="30"></uni-icons>
			<view class="">
				热销商品
			</view>
		</view>
		<view class="listContainer1">
			<view class="listItem" v-for="(item,i) in hotGoodsList" :key="i">
				<image class="goodsImage" :src="item.goodsImg" mode="aspectFit"></image>
				<view class="goodsName">{{item.goodsName}}</view>
				<view class="goodsPrice">${{item.goodsPrice}}</view>
			</view>
		</view>


	</div>
</template>
<script>
	export default {
		data() {
			return {
				// 轮播数据
				carouselItems: [],
				recommendGoodsList: [], //推荐商品
				hotGoodsList: [], //热销商品
				newGoodsList: [], // 新品上架
			};
		},
		onLoad() {
			this.loadData();
		},
		methods: {
			loadData() {
				// uni.request({
				// 	url: 'http://www.zjff495.cn:5058/app/v1/home/index', //仅为示例，并非真实接口地址。			   
				// 	success: (res) => {
				// 		console.log(res.data);
				// 		this.carouselItems = res.data.data.carouselList;
				// 		console.log(this.carouselItems)
				// 	}
				// });
				uni.showLoading({
					title: 'loading'
				});
				uni.request({
					url: 'http://localhost:5050/home/index'
				}).then(result => {
					uni.hideLoading();
					console.log(result.data);
					this.carouselItems = result.data.data.carouselList;
					this.recommendGoodsList = result.data.data.recommendGoodsList;
					this.hotGoodsList = result.data.data.hotGoodsList;
					this.newGoodsList = result.data.data.newGoodsList;


				}).catch(error => {
					console.log(error)
				})
			},

			onClick2Detail(goodsId) {
				uni.navigateTo({
					url: '/pages/goodsDetail/goodsDetail?goodsId=' + goodsId
				})

			},


		}
	};
</script>
<style lang="scss" scoped>
	.image {
		width: 50rpx;
		height: 50rpx;
	}

	.text {
		font-size: 26rpx;
		margin-top: 10rpx;
	}

	.grid-item-box {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.titleHeader {
		padding: 10px 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		background-color: $uni-bg-color-grey;
	}

	.listContainer1 {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;

		.listItem {
			margin: 10px 0;
			display: flex;
			flex-direction: column;
			width: 33.3%;

			.goodsImage {
				height: 100px;
				width: 100%;
			}

			.goodsName {
				margin: 10px 10px 0;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}

			.goodsPrice {
				margin: 0 10px;
				font-size: 18px;
				font-weight: bold;
				color: red;
				text-align: right;
			}
		}
	}
</style>